<template>
  <div class="suqery">
    <div class="header">
      <span class="squery">
        <i class="iconfont">
          <img :src="images1" class="iconss">
        </i>
        <input
          type="text"
          placeholder="搜索你想要的宝贝"
          class="int"
          v-model.trim="search"
          v-on:blur="input"
        >
      </span>
      <span class="mores">搜索</span>
    </div>
     <div class="header-a"></div>
    <div>
      <p class="p1">热门搜索</p>
      <ul>
        <li v-for="item in keywords" :key="item.id">{{item}}</li>
      </ul>
    </div>

    <div class="search-hot">
      <p class="p2" v-show="shows">历史记录</p>
      <ul>
        <li v-for="item in keywords" :key="item.id">{{item}}</li>
      </ul>
    </div>
    <div class="sear_history clearfix">
      <p @click="clearhis">清空历史记录</p>
    </div>
  </div>
</template>

<script>
import pic1 from "../../icons/squery.png";
export default {
  name: "Squery",
  data() {
    return {
      images1: pic1,
      list: [],
      search: "",
      keywords: [],
      shows: true
    };
  },
  created() {
    this.histor();
  },
  methods: {
    histor() {
      // console.log('aa')
      if (this.keywords.length == 0) {
        this.shows = false;
      }
    },
    input(val) {
      if (this.search != "") {
        this.$router.push({
          path: "/searchlist"
        });
        this.search = "";
      }
      if (localStorage.getItem("keywords")) {
        this.keywords = JSON.parse(localStorage.getItem("keywords"));
        this.keywords = Object.assign(
          [],
          JSON.parse(localStorage.getItem("keywords")),
          []
        );
        this.keywords.unshift(this.search);
        localStorage.setItem("keywords", JSON.stringify(this.keywords));
        this.keyword = "";
      } else {
        this.keywords = Object.assign(
          [],
          JSON.parse(localStorage.getItem("keywords")),
          [this.search]
        );
        localStorage.setItem("keywords", JSON.stringify([this.search]));
      }
      // console.log(this.keywords)
      const arr = [...new Set(this.keywords)];
      // console.log(arr)
      if (this.keywords.length > 0) {
        this.keywords = arr;
        this.shows = true;
      }
      if (this.keywords.length > 12) {
        // 保留12个值
        this.keywords.pop();
        this.shows = true;
      }
      this.search = "";
    },
    handleInput() {
      //  const params= {value: this.data.search}
      //  axios.post(url,params).then(res=>{
      //      console.log(res)
      //      this.list=resp.body.slice(0,10)
      //  })
    },
    clearhis() {
      this.keywords = [];
      localStorage.removeItem("keywords");
    },
    created() {
      this.keywords = JSON.parse(localStorage.getItem("keywords"));
    }
  }
  //  computer:{
  //     filtered(){
  //         return this.list.filter((item =>{
  //             return list.title.match(this.search)
  //         }))
  //     }
  //  }
};
</script>

<style lang="less" scoped>
@import "../../less/squery.less";
</style>
